import {useDrag} from "react-dnd";
import {CreatePageModel, PageItemType} from "@/models/createPage";
import {Button, Image, Input, Upload} from "antd";
import {useSnapshot} from "@@/exports";
import * as assert from "assert";
import {ProForm, ProFormUploadDragger} from "@ant-design/pro-components";
import {UploadOutlined} from "@ant-design/icons";

export interface ComponentType {
    type: "drag" | "preview" | "config";
    item?: PageItemType;

}

const Config = (item: PageItemType) => {
    let state = CreatePageModel.state;
    const {currentItem} = useSnapshot(state)
    return <div key={item.id}>
        <Upload
            name="file"
            action="https://leuan.top/api/file/upload"
            onChange={(info) => {
                if (info.file.status === 'done') {
                    let targetItem = state.pageData.find(i => i.id === item.id);
                    let indexOf = state.pageData.indexOf(targetItem);
                    let urls = info.file.response.data;
                    item = JSON.parse(JSON.stringify(item))
                    item.item.url = urls[0]
                    console.log(item)
                    state.pageData.splice(indexOf, 1, item.item)

                }
            }
            }
        >
            <Button icon={<UploadOutlined/>}>上传海报</Button>
        </Upload>
    </div>
}

const DragImage = (props: ComponentType) => {
    const [{isDragging}, drag, preview] = useDrag(
        () => ({
            type: props.type === "drag" ? "bh" : "-",
            item: {id: `${Math.random().toFixed(0)}`, type: "image"} as PageItemType,
            collect: (monitor) => ({
                isDragging: !!monitor.isDragging()
            })
        }),
        []
    );
    switch (props.type) {
        case "drag":
            return <div ref={drag} key="-1"
                        style={{ background: "#3f3f3f", textAlign: "center"}}>图片</div>;
        case "preview":
            return <div ref={drag}
                        onClick={() => CreatePageModel.actions.setCurrentItem(props.item || {} as PageItemType)}>
                {props.item?.url ?
                    <img width="100%"
                         style={{display: "block"}}
                         key={props.item.id} src={props.item.url}/> :
                    <img width="100%"
                         style={{display: "block"}}
                         src="https://img.tuguaishou.com/ips_templ_preview/c4/8a/86/lg_1551025_1549373987_5c59922338bb7.jpg!w280?auth_key=1679559371-0-0-8dd4391d8968c7c715adc5528b6557d4"
                         key={props.item?.id}/>}
            </div>
        case "config":
            return <Config item={props.item}/>
    }

}

export default DragImage